<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <!-- <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a> -->
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: true,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];

    // 整理数据
    // 点击是否收藏，收藏 / 取消收藏替换出现
    // 点击全选/全不选
    // 点击删除，删除一行
    // 下面删除选择的内容
    // 选中内容进行添加，然后可以合并删除


    // 判断是否需要全选
    // function isCheckAll(data){
    //  var res =  data.every(item=>item.checked);
    //  return res;
    //  console.log(res);
    // }
    let isCheckAll = data => data.every(item => item.checked);


    // 整理数据
    // 渲染数据
    var ul = document.querySelector('#list')
    function dataRender(data) {
      // 清空
      ul.innerHTML = '';
      data.forEach(function (item, key) {
        var liEl = document.createElement('li')
        var collectll =
          liEl.innerHTML = `
            <input type="checkbox"${item.checked ? 'checked' : ''} />
           <span>${item.title}</span>
           ${item.collect ? ' <a href="javascript:;" class="cancelCollect">取消收藏</a> ' : ' <a href="javascript:;" class="collect">收藏</a> '};
          <a href="javascript:;" class="remove">删除</a>
          `;

        // 渲染的时候立即获取

        // 方法一：直接获取，判断绑定
        // var collectEl = liEl.querySelector('.collect')
        // var cancelCollectEl = liEl.querySelector('.cancelCollect')
        // // console.log(collectEl);
        // // console.log(cancelCollectEl);
        // if (collectEl) {
        //   collectEl.onclick = function () {
        //     data[key].collect = true;
        //     dataRender(data)
        //   }
        // }
        // if (cancelCollectEl) {
        //   cancelCollectEl.onclick = function () {
        //     data[key].collect = false;
        //     dataRender(data)
        //   }
        // }


        // 方式二：事件委派的形式
        liEl.onclick = function (e) {
          // 点击收藏 
          if (e.target.classList.contains("collect")) {
            // console.log("点击了收藏");
            data[key].collect = true;
            dataRender(data);
          }
          // 点击取消收藏
          if (e.target.classList.contains("cancelCollect")) {
            // console.log("点击了收藏");
            data[key].collect = false;
            dataRender(data);
          }

          // 删除li
          if (e.target.classList.contains("remove")) {
            data.splice(key, 1);
            // console.log(data);
            document.querySelector("#checkAll").checked = data.length && isCheckAll(data);
            dataRender(data);
          }
          if (e.target.nodeName === 'INPUT') {
            data[key].checked = e.target.checked;
            document.querySelector("#checkAll").checked = data.length && isCheckAll(data);
          }
        }
        ul.appendChild(liEl);
      })

      // 小删除
      // var removeEll = document.querySelectorAll('.remove')
      // removeEll.forEach(function (item) {
      //   item.onclick = function () {
      //     item.parentNode.remove()
      //   }
      // })
    }
    dataRender(data)


    // 全选 / 全不选
    var checkAllEl = document.querySelector('#checkAll')
    checkAllEl.onclick = function () {
      data.forEach(item => {
        item.checked = this.checked
      })
      dataRender(data)
    }


    // 删除指定音乐
    document.querySelector('#remove').onclick = function () {
      // data = data.filter(function(item){
      //   !item.checked
      // })
      data = data.filter(item =>!item.checked)
      document.querySelector("#checkAll").checked = data.length && isCheckAll(data);
      dataRender(data)
    }


    // 点击添加功能
    var addEle = document.querySelector("#add");
    addEle.onclick = function () {
      var title = document.querySelector("#newInfo");
      var type = title.value
      var obj = {
        id: data.length,
        title: type,
        checked: false,
        collect: false
      };
      data.push(obj);
      dataRender(data);
      title.value = ''
    }

  </script>
</body>

</html>